
<template>
    <div  class="app-container">
        <div class="header"> 新增产品 </div>
        <div class="form-container">
          <div class="form">
            <el-form :model="productForm" status-icon :rules="rules" ref="productForm" label-width="100px">

                <el-form-item label="产品名" prop="name" >
                  <el-input v-model="productForm.name" placeholder="请输入产品名"/>
                </el-form-item>
               
                <el-form-item label="价格" prop="price" >
                  <el-input placeholder="请输入价格" v-model.number="productForm.price"/>
                </el-form-item>

                <el-form-item label="产品类型" prop="type.id">
                  <el-select v-model="productForm.type.id" clearable placeholder="请选择产品类型">
                    <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
                </el-form-item>

                <el-form-item label="产品描述" prop="description" >
                  <el-input placeholder="请输入产品描述" v-model="productForm.description"/>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('productForm')">立即创建</el-button>
                    <el-button @click="resetForm('productForm')">重置</el-button>
                </el-form-item>
            </el-form>
          </div>
        </div>
</div>
</template>

<script>

import rules  from "@/data/productRules"
  export default {
    data() {
      return {
        types:[],
        productForm: {
          name: '123',
          price:'',
          type:{
            id:''
          },
          description:'',
        },
        rules
      };
    },
    methods: {
      async getData() {  
          // 获取用户角色列表
        const res = await this.$store.dispatch('type/getList') 
        if(res.code == 1) {
            console.log(res.data);
            this.types = res.data
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }

      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const {msg} = await this.$store.dispatch('product/addProduct',this.productForm)
            this.$message({ showClose: true, message: msg, type: 'success' })
            this.$refs[formName].resetFields();
          } else {
            this.$message({ showClose: true, message: '请输入填写合法的表单数据', type: 'error' })
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$message({ showClose: true,  message: '重置成功',type: 'success'})
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>


<style lang="scss" scoped>
    .app-container{
        position: absolute;
         left: 0;
         right: 0;
        padding: 30px;
        background-size: cover;
        height: 100%;
        background-attachment: fixed;
        background-image: url(https://cdn.jsdelivr.net/npm/kang-static/home/assets/bg/049.jpg);
        background-repeat: no-repeat;
            
        .header{
            text-align: center;
            z-index: -999;
            margin-bottom: 20px;
            font-size: 20px;
            color: #606266;
            font-weight: 700;
        }
        .form-container{
            display: flex;
            justify-content: center;
            align-items:center;
            padding-top: 30px;
            width: 500px;
            margin: 0 auto;
            border-radius: 5px;
            background: hsla(0,0%,100%,.5);
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        }
        .form{
            width: 400px;
        }
    }
</style>